<style>
    body{
        color:#535353 !important
    }
    .req{
        color: red;
    }
    .layui-input-block input{
        width: 50%;
    }
    .icon-4 {
        background: url('/static/admin/images/眼睛_显示.png');
        /* position: absolute; */
        /* right: -10px; */
        /* cursor: pointer; */
    }
    .icon-5 {
        background: url('/static/admin/images/眼睛_隐藏.png') no-repeat -55px -43px;
    }
    .layui-form-item .layui-input-inline {
        margin-right: 0px;
    }
    .layui-form-mid {
        padding: 8px 0 !important;
    }
    .div-text{
        background-color: #f3f3f3;
        border: 1px solid #e3e3e3;
        text-align: center;
        box-sizing:border-box;
        width: 200px;
    }
</style>
<div class="layuimini-container">
    <div style="display: flex;justify-content: space-between;">
        <h2 style="margin-left: 30px;">应用配置</h2>
        {if !isset($rows.id)}
        <a href="/admin/index/appList">
          <button class="layui-btn  layui-btn-normal layui-btn-sm">返回</button>
        </a>
        {/if}
    </div>
    <hr>
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" name="appid" value="{$rows.appid|default=''}">

        <div class="layui-form-item">
            <label class="layui-form-label required"> 应用名称：</label>
            <div class="layui-input-block">
                <input type="text" name="app_name" autocomplete="off" lay-verify="required" lay-reqtext="请输入应用名称" placeholder="请输入应用名称"
                    class="layui-input" value="{$rows.app_name|default=''}">
            </div>
        </div>

        {if isset($rows.appid)}
        <div class="layui-form-item">
            <label class="layui-form-label"> appid:</label>
            <div class="layui-input-block" style="padding: 9px 0;color:#636363">
                <span class="text-hide-appid">********* </span>
                <span class="text-show-appid" style="display: none;">{$rows.appid|default='系统自动生成'}</span>
                <span class="icon-hide-appid"><img src="/static/admin/images/眼睛_显示.png" style="width: 20px;margin-top:-5px"></span>
                <span class="icon-show-appid" style="display: none;"><img src="/static/admin/images/眼睛_隐藏.png" style="width: 20px;margin-top:-4px"></span>
            </div>
        </div>
        {/if}

        {if isset($rows.app_secret)}
        <div class="layui-form-item">
            <label class="layui-form-label"> app_secret:</label>
            <div class="layui-input-block" style="padding: 9px 0;color:#636363">
                <span class="text-hide-secret">********* </span>
                <span class="text-show-secret" style="display: none;">{$rows.app_secret|default='系统自动生成'}</span>
                <span class="icon-hide-secret"><img src="/static/admin/images/眼睛_显示.png" style="width: 20px;margin-top:-5px"></span>
                <span class="icon-show-secret" style="display: none;"><img src="/static/admin/images/眼睛_隐藏.png" style="width: 20px;margin-top:-4px"></span>
            </div>
        </div>
        {/if}

        <div class="layui-form-item">
            <label class="layui-form-label">应用图标：</label>
            <div class="layui-input-block layuimini-upload">
                <div class="layui-upload">
                    <input type="hidden" name="app_img" id="app_img" value="{$rows.app_img|default=''}">
                    <button type="button" class="layui-btn layui-btn-primary" id="uploadBtn">上传图片</button> 
                    <div class="layui-upload-list">
                      <img class="layui-upload-img" id="showImg" {if empty($rows.app_img)} style="display:none;width: 100px; height: 100px;" {/if} style="width: 100px; height: 100px; " src="{$rows.app_img|default=''}" >
                      <!-- <p id="imgHint"></p> -->
                    </div>
                  </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">公司名称：</label>
            <div class="layui-input-block">
                <input type="text" name="company_name" autocomplete="off" placeholder="请输入公司名称"
                    class="layui-input" value="{$rows.company_name|default=''}">
            </div>
        </div>

        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button class="layui-btn  layui-btn-normal layui-btn-sm" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<input type="hidden" value="{$rows.id??''}" id="appid">

<script src="/static/common/js/jquery-1.10.1.min.js"></script>


<script>
    layui.use(['form', 'layer','upload'], function() {
        form = layui.form,
        layer = layui.layer,
        upload = layui.upload,

        addLinkUrl = "addData"

        upload.render({
        elem: '#uploadBtn'
        ,url: '/admin/ajax/upload' //必填项
        ,method: ''  //可选项。HTTP类型，默认post
        ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
        ,done: function(res){
            //上传完毕回调，res是服务器返回的对象，包含上传成功或失败的提示信息等。
            if(res.code == 1){ //这里假设服务器返回的code为0表示成功，可以根据实际情况调整判断条件。
                //显示图片回显区域，并且设置图片的src为返回的图片地址。
                $('#showImg').attr('src', res.data.url); // 假设返回的JSON中包含图片的URL在data.url字段中。
                $('#showImg').show(); // 显示图片元素。
                $('#app_img').val(res.data.url); // 显示图片元素。
                // $('#imgHint').text('上传成功'); // 可选，显示上传成功的提示信息。
            } else {
                // $('#imgHint').text('上传失败'); // 可选，显示上传失败的提示信息。
            }
            }
        }); 

        //监听提交
        form.on('submit(formDemo)', function(data){
            var appid=$('#appid').val();
            $.ajax({
                url:addLinkUrl,
                data: $('#app-form').serialize(),
                type:'POST',
                success:function(result){
                    if (result.code == 1) {
                        layer.alert(result.msg, {icon: 1});
                        if(!appid){
                            setTimeout(function(){
                              window.location = '/admin/index/appList';
                            },1000)
                        }
                    }else{
                        layer.alert(result.msg, {icon: 2});
                    }
                },
                error:function (res) {
                    layer.alert(result.msg, {icon: 2});
                }
            });

            return false;
        })

        // 显示和隐藏
        $('.icon-show-appid').click(function(){
            $('.text-show-appid').hide();
            $('.text-hide-appid').show();
            $('.icon-hide-appid').show();
            $('.icon-show-appid').hide();
        })
        $('.icon-hide-appid').click(function(){
            $('.text-show-appid').show();
            $('.text-hide-appid').hide();
            $('.icon-show-appid').show();
            $('.icon-hide-appid').hide();
        })
        $('.icon-show-secret').click(function(){
            $('.text-show-secret').hide();
            $('.text-hide-secret').show();
            $('.icon-hide-secret').show();
            $('.icon-show-secret').hide();
        })
        $('.icon-hide-secret').click(function(){
            $('.text-show-secret').show();
            $('.text-hide-secret').hide();
            $('.icon-show-secret').show();
            $('.icon-hide-secret').hide();
        })

    })
</script>
